<script src="http://order.you-fine.cn/vue/axios.min.js"></script>
<script src="http://order.you-fine.cn/vue/vue.js"></script>
<!-- <link rel="stylesheet" href="https://xunjia.szbls.net/vue/index.css"> -->
<script src="http://order.you-fine.cn/vue/index.js"></script>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">

	<div class="orderBox">
		<div class="title">订单信息</div>
		<div class="box">
			<div class="formItem">
				<label class="control-label col-xs-12 col-sm-2">PI合同号</label>
				<div class="col-xs-12 col-sm-8">
					<el-input v-model="pi_num" size="mini" placeholder="请输入PI合同号"></el-input>
				</div>
			</div>
			<div class="formItem">
				<label class="control-label col-xs-12 col-sm-2">成单日期</label>
				<div class="col-xs-12 col-sm-8">
					<el-date-picker v-model="cheng_time" size="mini" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
						type="date" placeholder="选择日期时间"></el-date-picker>
				</div>
			</div>
			<div class="formItem">
				<label class="control-label col-xs-12 col-sm-2">订单来源</label>
				<div class="col-xs-12 col-sm-8">
					<el-select v-model="source_id" size="mini" placeholder="请选择">
						<el-option v-for="item in Sourcelist" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="formItem">
				<label class="control-label col-xs-12 col-sm-2">截止交货日期</label>
				<div class="col-xs-12 col-sm-8">
					<el-date-picker v-model="jiao_time" size="mini" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
						type="date" placeholder="选择日期时间"></el-date-picker>
				</div>
			</div>

			<div class="formItem">
				<label class="control-label col-xs-12 col-sm-2">客户姓名</label>
				<div class="col-xs-12 col-sm-8">
					<el-input v-model="contract_name" size="mini" placeholder="请输入客户姓名"></el-input>
				</div>
			</div>
			<div class="formItem">
				<label class="control-label col-xs-12 col-sm-2">邮箱</label>
				<div class="col-xs-12 col-sm-8">
					<el-input v-model="contract_email" size="mini" placeholder="请输入邮箱"></el-input>
				</div>
			</div>
			<div class="formItem">
				<label class="control-label col-xs-12 col-sm-2">电话</label>
				<div class="col-xs-12 col-sm-8">
					<el-input v-model="contract_mobile" size="mini" placeholder="请输入电话"></el-input>
				</div>
			</div>
			<div class="formItem">
				<label class="control-label col-xs-12 col-sm-2">客户国家</label>
				<div class="col-xs-12 col-sm-8">
					<el-select v-model="country_id" size="mini" placeholder="请选择客户国家">
						<el-option v-for="item in countrylist" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="formItem">
				<label class="control-label col-xs-12 col-sm-2">合同金额</label>
				<div class="col-xs-12 col-sm-8">
					<el-input v-model="money" size="mini" placeholder="请输入合同金额(美元)"></el-input>
				</div>
			</div>
			<div class="formItem">
				<label class="control-label col-xs-12 col-sm-2">合同文件</label>
				<div class="col-xs-12 col-sm-8">
					<el-upload class="upload-demo" action="http://order.you-fine.cn/api/common/upload"
						:on-exceed="exceed" :on-preview="picUpload" :on-success="contract_filessuccess"
						list-type="text"  multiple :on-remove="handleRemove" >
						<el-button size="mini" type="primary">点击上传</el-button>
					</el-upload>
				</div>
			</div>
			<div class="formItem">
				<label class="control-label col-xs-12 col-sm-2">生产确认单</label>
				<div class="col-xs-12 col-sm-8">
					<el-upload class="upload-demo" action="http://order.you-fine.cn/api/common/upload"
						:on-exceed="exceed" :on-preview="picUpload" :on-success="queren_filesimgsuccess"
						list-type="picture" multiple :on-remove="querenhandleRemove" >
						<el-button size="mini" type="primary">点击上传</el-button>
					</el-upload>
				</div>
			</div>
			<div class="formItem">
				<label class="control-label col-xs-12 col-sm-2">备注</label>
				<div class="col-xs-12 col-sm-8">
					<el-input type="textarea" v-model="remark" placeholder="请输入内容" maxlength="250" show-word-limit
						style="width: 90%;"></el-input>
				</div>
			</div>
		</div>
	</div>

	<div class="goodsBox">
		<div class="title">商品信息</div>
		<div class="box">

			<el-table :data="tablelist" tooltip-effect="dark" border @current-change="handleCurrentChange">

				<el-table-column label="操作" fixed width="80" align="center">
					<template slot-scope="scope">
						<span class="icon" @click="addItem(scope)"><i class="el-icon-circle-plus"></i></span>
						<span class="icon" v-if="scope.$index != 0" @click="delItem(scope)"><i
								class="el-icon-delete"></i></span>
					</template>
				</el-table-column>
				<el-table-column prop="cate1_id" label="选择产品一级分类" width="150" align="center">
					<template slot-scope="scope">
						<el-select size="mini" v-model="scope.row.cate1_id" placeholder="请选择产品一级分类"
							@change="handleProvinceChange">
							<el-option v-for="item in cate1_idlist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</template>
				</el-table-column>

				<el-table-column prop="cate2_id" label="选择产品二级分类" width="150" align="center">
					<template slot-scope="scope">
						<el-select size="mini" placeholder="请选择产品二级分类" v-model="scope.row.cate2_id">
							<el-option v-for="item in cate2_idlist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</template>
				</el-table-column>

				<el-table-column label="商品名称"  width="150" align="center" prop="name">
					<template slot-scope="scope">
						<el-input placeholder="请输入" size="mini" clearable v-model="scope.row.name"></el-input>
					</template>
				</el-table-column>

				<el-table-column label="订单图片" width="150" align="center" prop="images">
					<template slot-scope="scope">
						<div :style="{ height: boxHeight + 'px'}" class="lastclass">
							<el-upload id="uploadheight"  action="http://order.you-fine.cn/api/common/upload"
								:on-exceed="exceed" :on-preview="picUpload" :on-success="orderimgSuccess"  :before-upload="beforeUpload"
								list-type="picture" multiple :on-remove="orderhandleRemove" >
								<el-button size="mini" type="primary">点击上传</el-button>
							</el-upload>
						</div>
						
					</template>
				</el-table-column>
	<el-table-column label="件数"  width="150" align="center" prop="num">
					<template slot-scope="scope">
						<el-input placeholder="请输入" size="mini" clearable v-model="scope.row.num"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="尺寸参数" width="150" align="center" prop="size_data">
					<template slot-scope="scope">
						<el-input placeholder="请输入" size="mini" clearable v-model="scope.row.size_data"></el-input>
					</template>
				</el-table-column>

				<el-table-column label="具体要求" width="200" align="center" prop="yaoqiu">
					<template slot-scope="scope">
						<el-input type="textarea" placeholder="请输入" size="mini" clearable
							v-model="scope.row.yaoqiu"></el-input>
					</template>
				</el-table-column>

				<el-table-column label="工期(天)" width="150" align="center" prop="days">
					<template slot-scope="scope">
						<el-input placeholder="请输入" size="mini" clearable v-model="scope.row.days"></el-input>
					</template>
				</el-table-column>

				<el-table-column label="色板照片" align="center" width="150" prop="is_seban_image">
					<template slot-scope="scope">
						<el-radio v-model="scope.row.is_seban_image" :label="1">是</el-radio>
						<el-radio v-model="scope.row.is_seban_image" :label="0">否</el-radio>
						<div v-if="scope.row.is_seban_image == 1" style="margin-top: 5px;">
							<div :style="{ height: boxHeights + 'px'}" class="lastclass">
								<el-upload class="upload-demo"  id="uploadheights" action="http://order.you-fine.cn/api/common/upload"
								:on-exceed="exceed" :on-preview="picUpload" :on-success="sebanimgSuccess"  :before-upload="beforeUpload"
								list-type="picture" multiple :on-remove="sebanhandleRemove" >
								<el-button size="mini" type="primary">点击上传</el-button>
							</el-upload>
							</div>
						</div>
					</template>
				</el-table-column>


				<el-table-column label="预埋照片" align="center" width="150" prop="is_yumai_image">
					<template slot-scope="scope">
						<el-radio v-model="scope.row.is_yumai_image" :label="1">是</el-radio>
						<el-radio v-model="scope.row.is_yumai_image" :label="0">否</el-radio>
						<div v-if="scope.row.is_yumai_image == 1" style="margin-top: 5px;">
							<div :style="{ height: boxHeightx + 'px'}" class="lastclass">
								<el-upload class="upload-demo"  id="uploadheightx" action="http://order.you-fine.cn/api/common/upload"
									:on-exceed="exceed" :on-preview="picUpload" :on-success="yumaiimgSuccess"
									list-type="picture" multiple :on-remove="yumaihandleRemove" >
									<el-button size="mini" type="primary">点击上传</el-button>
								</el-upload>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="备注" width="150" align="center" prop="remark">
					<template slot-scope="scope">
						<el-input  type="textarea" placeholder="请输入" size="mini" clearable v-model="scope.row.remark"></el-input>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="hwk-btn mt20">
			<el-button type="primary" @click="creatOrder">确 定</el-button>
		</div>
	</div>
</div>
<script>
	var app = new Vue({

		el: '#app',

		data: {
			tablelist: [
				{
					cate1_id: '',
					cate2_id: '',
					name: '',
					images: [],
					num:'',
					size_data: '',
					yaoqiu: '',
					days: '',
					seban_images: [],
					yumai_images: [],
					remark: ''
				}
			],
			Sourcelist: [

			],
			countrylist: [

			],
			cate1_idlist: [],
			cate2_idlist: [],
			pi_num: '',
			cheng_time: '',
			jiao_time: '',
			source_id: '',
			contract_name: '',
			contract_email: '',
			contract_mobile: '',
			country_id: '',
			money: '',
			contract_files: '',
			queren_files: '',
			remark: '',
			listitem: {},
			contract_fileList:[],
			queren_filesList:[],
			order_filesList:[],
			seban_filesList:[],
			yumai_filesList:[],
			boxHeight:'',
			boxHeights:'',
			boxHeightx:'',
		},
		created() {
			///1232132
			axios.defaults.baseURL = "http://order.you-fine.cn/xEomHdgMaN.php";
			//axios.defaults.headers["token"] = 'ad43m+pxtJeciiWbUqsiOpjBphSj09g8b65+deVWiJk';
			// axios.defaults.headers["content-type"] = "application/x-www-form-urlencoded;charset=utf-8";
			axios.defaults.withCredentials = true;
			axios.defaults.crossDomain = true;
			axios.defaults.headers["content-type"] = "application/json;charset=utf-8";
			//axios.defaults.headers["Cookie"] = "PHPSESSID=ogdn29lnodosfgpkdd5qddd1ug; Hm_lvt_d7c7037093938390bc160fc28becc542=1710838606,1711013362,1711069051,1711328460";
			this.initData()
			this.getSource()
			this.getcountry()
		},
		methods: {
			initData() {
				axios.post('/order/getCate', {
					pid: 0
				}).then((res) => {
					if (res.data.code == 1) {
						this.cate1_idlist = res.data.data
					} else {
						this.$message.error(res.data.data.msg);
					}
				}).catch((error) => {
					console.log(error);
				});
			},
			handleProvinceChange(value) {
			    this.tablelist[0].cate2_id = ''
				axios.post('/order/getCate', {
					pid: value
				}).then((res) => {
					if (res.data.code == 1) {
					    
						this.cate2_idlist = res.data.data
					} else {
						this.$message.error(res.data.data.msg);
					}
				}).catch((error) => {
					console.log(error);
				});
			},
			change(index) {
				this.$forceUpdate(); //强制刷新
				let moment = this.tablelist[index];
				this.$set(this.tablelist, index, moment);
				console.log(index, moment)
			},
			creatOrder() {
				axios.post('/order/addOrder', {
					pi_num: this.pi_num,
					cheng_time: new Date(this.cheng_time).getTime() / 1000,
					jiao_time: new Date(this.jiao_time).getTime() / 1000,
					source_id: this.source_id,
					money: this.money,
					contract_name: this.contract_name,
					contract_email: this.contract_email,
					contract_mobile: this.contract_mobile,
					country_id: this.country_id,
					contract_files: this.contract_fileList,
					queren_files: this.queren_filesList,
					remark: this.remark,
					products: this.tablelist
				}).then((res) => {
					if (res.data.code == 1) {
						this.$message.success(res.data.msg);
						$(".btn-refresh").trigger("click");
						setTimeout(() => {
							Fast.api.close(1);
							parent.location.reload()
							$(".btn-refresh").trigger("click");
						}, 1500)
					} else {
						this.$message.error(res.data.msg);
					}
				}).catch((error) => {
					console.log(error);
				});
			},
			getSource() {
				axios.post('/order/getSource', {}).then((res) => {
					if (res.data.code == 1) {
						this.Sourcelist = res.data.data
					} else {
						this.$message.error(res.data.data.msg);
					}
				}).catch((error) => {
					console.log(error);
				});
			},
			getcountry() {
				axios.post('/order/getCountry', {}).then((res) => {
					if (res.data.code == 1) {
						this.countrylist = res.data.data
					} else {
						this.$message.error(res.data.data.msg);
					}
				}).catch((error) => {
					console.log(error);
				});
			},
			exceed: function () {
				this.$message.error('最多只能上传1张图片');
			},
			handleRemove(file, fileList){
				this.contract_fileList.filter((item,index) => {
					if (item == file.response.data.fullurl) {
						this.contract_fileList.splice(index, 1);
					}
				});
			},
			querenhandleRemove(file, fileList){
				this.queren_filesList.filter((item,index) => {
					if (item == file.response.data.fullurl) {
					this.queren_filesList.splice(index, 1);
					}
				});
			},
			orderhandleRemove(file, fileList){
				this.listitem.images.filter((item,index) => {
					if (item == file.response.data.fullurl) {
						this.listitem.images.splice(index, 1);
					}
				});
			},
			sebanhandleRemove(file, fileList){
				this.listitem.seban_images.filter((item,index) => {
					if (item == file.response.data.fullurl) {
						this.listitem.seban_images.splice(index, 1);
					}
				});
			},
			yumaihandleRemove(file, fileList){
				this.listitem.yumai_images.filter((item,index) => {
					if (item == file.response.data.fullurl) {
						this.listitem.yumai_images.splice(index, 1);
					}
				});
			},
			// 上传成功
			contract_filessuccess(res,fileList) {
				this.contract_fileList.push(res.data.fullurl)
			},
			queren_filesimgsuccess(res) {
				this.queren_filesList.push(res.data.fullurl)
			},
			orderimgSuccess(res) {
				this.boxHeight=document.getElementById('uploadheight').offsetHeight
				this.listitem.images.push(res.data.fullurl)
			},
			handleCurrentChange(val) {
				this.listitem = val
			},
			sebanimgSuccess(res) {
				this.boxHeights=document.getElementById('uploadheights').offsetHeight
				this.listitem.seban_images.push(res.data.fullurl)
			},
			yumaiimgSuccess(res) {
				this.boxHeightx=document.getElementById('uploadheightx').offsetHeight
				this.listitem.yumai_images.push(res.data.fullurl)
			},
			beforeUpload(file) {
				return new Promise((resolve, reject) => {
					let image = new Image();
					let resultBlob = "";
					image.src = URL.createObjectURL(file);
					image.onload = () => {
						// 调用方法获取blob格式  
						resultBlob = this.compressUpload(image, file);
						resolve(resultBlob);
					};
					image.onerror = () => {
						reject();
					};
				});
			},
			//图片上传
			picUpload(file) {
				let _this = this;
				console.log(file
				);
				return new Promise((resolve, reject) => {
					let image = new Image(),
						resultBlob = "";
					image.src = URL.createObjectURL(file);
					image.onload = () => {
						// 调用方法获取blob格式
						resultBlob = _this.compressUpload(image, file);
						resolve(resultBlob);
					};
					image.onerror = () => {
						reject();
					};
				});
			},
			/* 图片压缩方法-canvas压缩 */
			compressUpload(image, file) {
				let canvas = document.createElement("canvas");
				let ctx = canvas.getContext("2d");
				let { width } = image,
					{ height } = image;
				canvas.width = width;
				canvas.height = height;
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				ctx.drawImage(image, 0, 0, width, height);
				// 进行压缩 
				let compressData = canvas.toDataURL(file.type || "image/jpeg", 0.2);
				// 压缩后调用方法进行base64转Blob
				let blobImg = this.dataURItoBlob(compressData);
				console.log(blobImg);
				return blobImg;
			},

			/* base64转Blob对象 */
			dataURItoBlob(data) {
				let byteString;
				if (data.split(",")[0].indexOf("base64") >= 0) {
					byteString = atob(data.split(",")[1]);
				} else {
					byteString = unescape(data.split(",")[1]);
				}
				let mimeString = data
					.split(",")[0]
					.split(":")[1]
					.split(";")[0];
				let ia = new Uint8Array(byteString.length);
				for (let i = 0; i < byteString.length; i += 1) {
					ia[i] = byteString.charCodeAt(i);
				}
				return new Blob([ia], { type: mimeString });
			},
			delItem(data) {
				this.tablelist.splice(data.$index, 1)
			},
			addItem(data) {
				let index = data.$index
				let item = {
					cate1_id: '',
					cate2_id: '',
					name: '',
					images: [],
					size_data: '',
					yaoqiu: '',
					days: '',
					is_seban_image:'',
					is_yumai_images:'',
					seban_images: [],
					yumai_images: [],
					remark: ''
				}
				this.tablelist.splice(index + 1, 0, item)
				console.log(this.tablelist)
			},

		}

	})
</script>
<style>
	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.el-upload__input {
		display: none !important;
	}
	.el-upload-list__item-status-label{
		text-align: end;
	}
	body,
	html {
		font-family: "Microsoft YaHei", Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #333;
		margin: 0;
		padding: 0;
	}

	#app {
		margin: 0;
		padding: 30px;
		box-sizing: border-box;
	}
	.lastclass{
		overflow-x: hidden;
	}

	.orderBox .title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
	}

	.orderBox .box {
		display: flex;
		flex-wrap: wrap;
		padding-top: 20px;
	}

	.orderBox .box .formItem {
		width: 33.3333%;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
	}

	.orderBox .box .formItem label {
		display: block;
		color: #666;
		font-size: 14px;
		margin-bottom: 3px;
		width: 120px;
	}

	.orderBox .box .formItem .el-input {
		width: 90%;
	}

	.orderBox .box .formItem .el-select {
		display: block;
	}

	.goodsBox {
		margin-top: 30px;
	}

	.goodsBox .title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
	}

	.goodsBox .box .el-radio {
		margin-right: 10px;
	}

	.hwk-title {
		height: 40px;
		color: #333;
		font-size: 16px;
		line-height: 40px;
		font-weight: 600;
	}

	#app .el-form-item {
		margin-bottom: 2px;
	}

	/* .hwk-xj-list table {
		min-width: 500px;
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
	}

	.hwk-xj-list table th {
		white-space: nowrap;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.hwk-xj-list table th,
	.hwk-xj-list table td {
		padding: 5px 8px;
		text-align: center;
		border: solid 1px #e2e2e2;
	} */

	.hwk-xj-list table td .name {
		flex: 1;
		width: 1px;
		margin-right: 5px;
	}

	.hwk-container {
		padding: 10px 0;
	}

	.hwk-btn {
		text-align: right;
	}

	.buttons {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.buttons .item {
		padding: 5px;
	}

	.mt10 {
		margin-top: 10px;
	}

	.mt20 {
		margin-top: 20px;
	}

	.mt20 {
		margin-top: 20px;
	}

	.p10 {
		padding: 10px;
	}

	.p20 {
		padding: 20px;
	}

	.u-flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	/* 换行 */
	.u-flex-wrap {
		flex-wrap: wrap;
	}

	/* 不换行 */
	.u-flex-nowrap {
		flex-wrap: nowrap;
	}

	/* 垂直居中 */
	.u-col-center {
		align-items: center;
	}

	/* 顶部对齐 */
	.u-col-top {
		align-items: flex-start;
	}

	/* 底部对齐 */
	.u-col-bottom {
		align-items: flex-end;
	}

	/* 左边对齐 */
	.u-row-left {
		justify-content: flex-start;
	}

	/* 水平居中 */
	.u-row-center {
		justify-content: center;
	}

	.u-row-evenly {
		justify-content: space-evenly;
	}

	/* 右边对齐 */
	.u-row-right {
		justify-content: flex-end;
	}

	/* 水平两端对齐，项目之间的间隔都相等 */
	.u-row-between {
		justify-content: space-between;
	}

	/* 水平每个项目两侧的间隔相等，所以项目之间的间隔比项目与父元素两边的间隔大一倍 */
	.u-row-around {
		justify-content: space-around;
	}

	.u-line-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>